<template>
  <div class="sanstyle">
    <!--左边 B-->
    <div>
      <div class="ssl" style="position: relative">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">设备选择</span>
            <br/>
            <span class="xwz">Equipment selection</span>
          </div>
        </div>
        <!--标题 E-->

        <!--监控列表 B-->
        <div class="jklb">
          <!--<div class="ssk" style="margin-top: .15rem;">
            <input type="text" placeholder="设备名称/区域查询" v-model="keyword"/>
            <img style="cursor: pointer" src="/static/images/ss.png" alt="">
          </div>-->
          <div style="margin-top: .2rem;"></div>
          <div class="lbbox" v-for="(item,index) in list" :key="index" @click="qiehuansxt(item)">
            <div><span>{{qgzfc(item.uniqueInfo)}}</span><span style="margin-left: .2rem;">{{item.name}}</span></div>
            <!--<span class="icon iconfont icon-huifang"></span>-->
            <div><span class="icon iconfont icon-yulan"></span></div>
          </div>
        </div>
        <!--监控列表 E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <!--tab切换 B-->
      <div class="qhtab" style="top: .1rem;left: .34rem">
        <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
          <span style="margin-left: .08rem;">{{item.name}}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <div id="map" style="width: 100%;height: 100%;"></div>
    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">{{jkname}}视频直播</span>
            <br/>
            <span class="xwz">Video footage</span>
          </div>
        </div>
        <!--标题 E-->

        <!--视频画面 B-->
        <div class="zhibo" id="playWnd"></div>
        <!--视频画面 E-->

        <!--标题 B-->
        <div class="sstitles" style="margin-top: .1rem;">
          <div class="twzs">
            <span class="dwz">{{jkname}}视频回放</span>
            <br/>
            <span class="xwz">Video playback</span>
          </div>
        </div>
        <!--标题 E-->
        <!--视频回放 B-->
        <div class="zhibo" id="backWnd"></div>
        <!--视频回放 E-->
      </div>
    </div>
    <!--右边 E-->

  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import http from '../utils/http'
  import api from '../utils/api'
  import * as EZUIKit from "ezuikit-js";

  var player = null;
  var playback = null;
  export default {
    name: "shipinjiankong",
    data() {
      return {
        keyword: "",
        list: [],
        areaId: "",
        yazhengma: "",
        accessToken: "",
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        maptype: "gnqh",
        jk: [],
        jkname: '',
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ]
      }
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
    },
    mounted() {
      let vm = this;
      (async function f() {
        let res = await http.get('/papi/0000085_json/gnqh.json')
        let arr = [];
        res.data.features.forEach(t => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.getaccessInfo();
      })();
    },
    methods: {
      datamap(flag) {
        this.navList.forEach(e => {
          if (flag == e.type) {
            e.sts = true
          } else {
            e.sts = false
          }
        })
        if (flag == 'gnqh') {
          let url = '/papi/0000085_json/gnqh.json';
          let jsondata = []
          let e = ['延庆区', '缓冲区', '核心区']
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          let geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          this.map(url, geo, this.jk)
        }
        if (flag == 'wg') {
          let geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };``
          let url = '/papi/0000085_json/wangge.json';
          this.map(url, geo, this.jk)
        }
      },
      map(url, geo, jk) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(url, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          setTimeout(function () {
            let option = {
              geo: geo,
              series: [
                {
                  name: "点位",
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: 'pin',
                  legendHoverLink: true,
                  symbolSize: [30, 30],
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: '#fff',
                        fontSize: 9,
                      },
                      formatter(value) {
                        return value.data.sum
                      }
                    }
                  },
                  data: jk,
                  itemStyle: {
                    normal: {
                      color: '#FE4141', //标志颜色
                    }
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke',
                  },
                  hoverAnimation: true,
                  zlevel: 2,
                }
              ]
            }
            myChart.hideLoading();
            myChart.setOption(option, true);
            myChart.resize();
          }, 1000);

          ///3、在渲染点击事件之前先清除点击事件
          myChart.off('click')
          myChart.on('click', function (params) {
            if (params.componentSubType == "scatter") {
              if (params.seriesName == '点位') {
                vm.MapJk(params.data);
              }
            }
          });

          window.addEventListener("resize", function () {
            myChart.resize();
          })
        });
      },
      filteryType(e) {
        if (e == '延庆区') {
          return 'rgba(203, 255, 252, 0.8)'
        }
        if (e == '缓冲区') {
          return 'rgba(74, 239, 230, 0.8)'
        }
        if (e == '核心区') {
          return 'rgba(4, 178, 169, 0.8)'
        }
        return 'rgba(203, 255, 252, 0.8)'
      },
      getaccessInfo() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.accessInfo + vm.areaId)
          if (res.data.code == '200') {
            let yzm = '', token = '';
            for (let key in res.data.data.codeMap) {
              yzm = res.data.data.codeMap[key]
            }
            vm.yazhengma = yzm;
            token = res.data.data.token, yzm
            vm.getysy(yzm, token);
          }
        })()
      },
      qgzfc(data) {
        if (data != null && data != undefined) {
          return data.split('-')[data.split('-').length - 1];
        }
      },
      getysy(yzm, token) {
        let vm = this;
        (async function f() {
          let res = await http.get(api.yingshi + vm.areaId + '&pageNum=0&pageSize=999')
          if (res.data.code == '200') {
            vm.list = res.data.data.content;
            if (vm.list.length > 0) {
              let jkd = [];
              vm.list.forEach(t => {
                let d = t.uniqueInfo.split('-');
                let z = {value: [t.lon, t.lat], sum: d[1], tdh: d[0], name: t.name}
                jkd.push(z)
              })
              vm.jk = jkd;
              setTimeout(function () {
                vm.datamap(vm.maptype);
              }, 500)

              let o = vm.list[1], arr = o.uniqueInfo.split('-');
              let xlh = arr[0], tdh = arr[1];
              vm.jkname = o.name;
              vm.unitplayer(yzm, token, xlh, tdh);
              vm.unitplayback(yzm, token, xlh, tdh);
            }
          }
        })()
      },
      unitplayer(yzm, token, xlh, tdh) {
        player = new EZUIKit.EZUIKitPlayer({
          autoplay: true,
          id: "playWnd",
          accessToken: token,
          url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
          template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
          // 视频上方头部控件
          //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
          //plugin: ['talk'],                       // 加载插件，talk-对讲
          // 视频下方底部控件
          //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
          audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
          // openSoundCallBack: data => console.log("开启声音回调", data),
          // closeSoundCallBack: data => console.log("关闭声音回调", data),
          // startSaveCallBack: data => console.log("开始录像回调", data),
          // stopSaveCallBack: data => console.log("录像回调", data),
          // capturePictureCallBack: data => console.log("截图成功回调", data),
          // fullScreenCallBack: data => console.log("全屏回调", data),
          // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
          // width: '100%',
          //height: '100%'
        });
        player.stop();
        // 切换为直播
        player.play();
      },
      unitplayback(yzm, token, xlh, tdh) {
        playback = new EZUIKit.EZUIKitPlayer({
          autoplay: true,
          id: "backWnd",
          accessToken: token,
          url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.rec",
          template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
          // 视频上方头部控件
          //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
          plugin: ['talk'],                       // 加载插件，talk-对讲
          // 视频下方底部控件
          //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
          audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
          decoderVersion: "v3.4",
          // openSoundCallBack: data => console.log("开启声音回调", data),
          // closeSoundCallBack: data => console.log("关闭声音回调", data),
          // startSaveCallBack: data => console.log("开始录像回调", data),
          // stopSaveCallBack: data => console.log("录像回调", data),
          // capturePictureCallBack: data => console.log("截图成功回调", data),
          // fullScreenCallBack: data => console.log("全屏回调", data),
          //getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
          //width: '100%',
          // height: '100%'
        });
        playback.stop();
        // 切换为直播
        playback.play();
      },
      qiehuansxt(item) {
        this.jkname = item.name;
        let arr = item.uniqueInfo.split('-');
        let xlh = arr[0], tdh = arr[1];
        player.stop();
        // 切换为直播
        player.play({
          url: "ezopen://" + this.yazhengma + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live"
        });
        playback.stop();
        // 切换为直播
        playback.play({
          url: "ezopen://" + this.yazhengma + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.rec"
        })
        // playback.play().then(()=>{
        //   player.play("ezopen://" + this.yazhengma + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live");
        // });

      },
      MapJk(item) {
        this.jkname = item.name;
        player.stop();
        // 切换为直播
        player.play({
          url: "ezopen://" + this.yazhengma + "@open.ys7.com/" + item.tdh + "/" + item.sum + ".hd.live"
        });
        playback.stop();
        // 切换为直播
        playback.play({
          url: "ezopen://" + this.yazhengma + "@open.ys7.com/" + item.tdh + "/" + item.sum + ".hd.rec"
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
  @import "../../static/css/spjk.css";
</style>
<style>
  .jklb {
    width: 100%;
    height: calc(100% - .7rem);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .jklb::-webkit-scrollbar { /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .jklb::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(46, 255, 242, 0.6);
  }
</style>
